<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import rightIcon from "../assets/right.svg"
import { cloneDeep, showToast } from "@/utils"
import persistence from "@/store/persistence"

export default {
  name: "unReceive",
  methods: {
    getShowNginxPicUrl,
    receive() {
      if (!this.currentSelectResource) {
        showToast.default("请选择一个资料")
        return
      }
      persistence.userReceiveResourceNew.set(this.currentSelectResource)
      this.$emit("update:hasReceiveResource", this.currentSelectResource)
      this.$emit("receive")
    },
  },
  props: {
    config: Object,
    getResourceTypeConfig: Function,
    hasReceiveResource: Object,
  },
  data() {
    return {
      currentSelectResource: null,
      rightIcon,
    }
  },
  emits: ["update:hasReceiveResource", "receive"],
}
</script>

<template>
  <view class="page">
    <image class="header" mode="widthFix" :src="getShowNginxPicUrl('6XvkaEuFypebQE9idZsj.png')" :show-menu-by-longpress="true"></image>
    <view class="resource-list">
      <view class="block" v-for="item in config.resourceList" :key="item.name">
        <image class="background" :src="getShowNginxPicUrl(item.background)" mode="widthFix" :show-menu-by-longpress="true"></image>
        <view
          class="content"
          :style="{
            '--top': item.contentPosition.top,
            '--border-radius': item.contentPosition.borderRadius,
          }"
        >
          <!--					资料列表-->
          <view class="item" v-for="resource in item.resourceList" :key="resource.name" @click="() => (currentSelectResource = resource)">
            <!--						图标-->
            <image class="icon" :src="getShowNginxPicUrl(getResourceTypeConfig(resource.type, config).icon)"></image>
            <view class="middle">
              <!--							标题-->
              <view class="name">{{ resource.name }}</view>
              <!--							描述-->
              <view class="desc">{{ resource.desc }}</view>
            </view>
            <view class="checkbox">
              <image :src="rightIcon" class="icon" v-if="currentSelectResource && currentSelectResource.id === resource.id"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="receive-btn" @click="receive">免费领取</view>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  padding-bottom: 20vh;
  > .header {
    width: 100vw;
  }
  > .resource-list {
    background: #fffff8;
    padding: 0 30rpx;
    > .block {
      margin-top: 30rpx;
      position: relative;
      > .background {
        width: 100%;
      }
      > .content {
        position: absolute;
        top: var(--top);
        bottom: 10rpx;
        left: 0;
        right: 0;
        border-radius: var(--border-radius);
        overflow-y: auto;
        padding: {
          bottom: 20rpx;
          left: 30rpx;
          right: 30rpx;
        }
        > .item {
          border-bottom: 2rpx solid var(--border-color);
          display: flex;
          align-items: center;
          padding: 10rpx 0;
          > .icon {
            width: 50rpx;
            height: 50rpx;
          }
          > .middle {
            margin-left: 30rpx;
            width: 0;
            flex: 1;
            > .name {
              font-size: 30rpx;
              font-weight: bold;
            }
            > .desc {
              font-size: 28rpx;
              color: var(--text-color-light);
              //margin-top: 10rpx;
            }
          }
          > .checkbox {
            width: 40rpx;
            height: 40rpx;
            margin-left: 30rpx;
            border: 2rpx solid #adabab;
            border-radius: 4rpx;
            background: #f6f6f6;
            display: flex;
            align-items: center;
            justify-content: center;
            > .icon {
              width: 25rpx;
              height: 25rpx;
            }
          }
        }
      }
    }
  }
  > .receive-btn {
    position: fixed;
    bottom: calc(40rpx + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 24rpx 120rpx;
    color: white;
    background: linear-gradient(94.18deg, rgba(255, 58, 51, 1) 3.12%, rgba(255, 133, 74, 1) 96.82%);
    font-size: 32rpx;
    border-radius: 45rpx;
  }
}
</style>
